<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>考勤管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/main.css" media="all" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css" />
		<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-select.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
	</head>

	<body class="main_body">
		<div class="layui-layout layui-layout-admin">
			<!-- 顶部 -->
			<div class="layui-header header">
				<div class="layui-main">
					<a href="#" class="logo">项目管理</a>
					<!-- 顶部右侧菜单 -->
					<ul class="layui-nav top_menu">
						<li class="layui-nav-item" pc>
							<a href="javascript:;">
								<img src="img/pic01.jpg" class="layui-circle" width="35" height="35">
								<cite>请叫我马哥</cite>
							</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;" data-url=""><i class="iconfont icon-zhanghu" data-icon="icon-zhanghu"></i><cite>个人资料</cite></a>
								</dd>
								<dd>
									<a href="javascript:;" data-url=""><i class="iconfont icon-shezhi1" data-icon="icon-shezhi1"></i><cite>修改密码</cite></a>
								</dd>
								<dd>
									<a href="javascript:;"><i class="iconfont icon-loginout"></i><cite>退出</cite></a>
								</dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>
			<!-- header导航 -->
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					        <span class="sr-only">Toggle navigation</span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					    </button>
						<a class="navbar-brand" href="index.html">概览</a>
					</div>
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li>
								<a href="project_manage.html">项目管理 <span class="sr-only">(current)</span></a>
							</li>
							<li>
								<a href="information_dynamic.html">信息动态</a>
							</li>
							<li >
								<a href="co_operation.html">协办任务</a>
							</li>
							<li>
								<a href="go_out.html">外出申请</a>
							</li>
							<li>
								<a href="outgo_approval.html">外出审批</a>
							</li>
							<li>
								<a href="submit_clues.html">企业提交线索</a>
							</li>
							<li class="active">
								<a href="attend_manage.html">考勤管理</a>
							</li>
							<li>
								<a href="team_manage.html">部门管理</a>
							</li>
							<li>
								<a href="member_manage.html">成员管理</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">设置 <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">Action</a>
									</li>
									<li>
										<a href="#">Another action</a>
									</li>
									<li>
										<a href="#">Something else here</a>
									</li>
									<li role="separator" class="divider"></li>
									<li>
										<a href="#">Separated link</a>
									</li>
									<li role="separator" class="divider"></li>
									<li>
										<a href="#">One more separated link</a>
									</li>
								</ul>
							</li>
						</ul>
					</div 
				</div>
			</nav>
			<!--树状图-->
			<div class="layui-side layui-bg-black" id="shu" style="display: none;">
				<div class="navBar layui-side-scroll" style="height: auto;">
					<div class="tree well">
								<ul>
									<li>
										<span><i class="icon-folder-open"></i> 顶级节点1</span>
										<ul>
											<li>
												<span><i class="icon-minus-sign"></i> 一级节点1</span>
												<a href=""></a>
												<ul>
													<li>
														<span><i class="icon-leaf"></i> 二级节点1_1</span>
														<a href=""></a>
													</li>
												</ul>
											</li>
											<li>
												<span><i class="icon-minus-sign"></i> 一级节点2</span>
												<a href=""></a>
												<ul>
													<li>
														<span><i class="icon-leaf"></i>二级节点2_1</span>
														<a href=""></a>
													</li>
													<li>
														<span><i class="icon-minus-sign"></i> 二级节点2_2</span>
														<a href=""></a>
														<ul>
															<li>
																<span><i class="icon-minus-sign"></i>三级节点2_1</span>
																<a href=""></a>
																<ul>
																	<li>
																		<span><i class="icon-leaf"></i>四级节点2_1</span>
																		<a href=""></a>
																	</li>
																	<li>
																		<span><i class="icon-leaf"></i> 四级节点2_2</span>
																		<a href=""></a>
																	</li>
																</ul>
															</li>
															<li>
																<span><i class="icon-leaf"></i>三级节点2_2</span>
																<a href=""></a>
															</li>
															<li>
																<span><i class="icon-leaf"></i> 三级节点2_3</span>
																<a href=""></a>
															</li>
														</ul>
													</li>
													<li>
														<span><i class="icon-leaf"></i>二级节点2_3</span>
														<a href=""></a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<span><i class="icon-folder-open"></i> 顶级节点2</span>
										<a href=""></a>
										<ul>
											<li>
												<span><i class="icon-leaf"></i> 一级节点2_1</span>
												<a href=""></a>
											</li>
										</ul>
									</li>
								</ul>
							</div>
				</div>
			</div>
			
			<!-- 内容 -->
			<div class="layui-body layui-form">
				<div class="layui-tab marg0" lay-filter="bodyTab">
					<div class="max-title">
						<div class="fl">考勤管理</div>
						<ul class="max-title-ul fr">
							<button class="btn-primary btn" data-target="#goout" data-whatever="@mdo" data-toggle="modal">外出申请提交</button>
						</ul>
					</div>
					<div class="cont-top">
						<div class="dropdown navbar-left">
							<select class="selectpicker form-control" title="全部动态" onchange="selectOnchang(this)">
								<option value="项目名称">项目名称</option>

								<option value="项目商家">项目商家</option>

								<option value="会员名称">会员名称</option>

								<option value="4">4</option>
							</select>
						</div>
						<form class="navbar-form navbar-left form-top">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="项目名称/编号">
							</div>
							<button type="submit" class="btn btn-default ms-btn">搜索</button>
						</form>
						<div class="dropdown navbar-right sort">
							<select class="selectpicker form-control" title="默认排序" onchange="selectOnchang(this)">
								<option value="项目名称">顺序</option>

								<option value="项目商家">降序</option>

								<option value="会员名称">会员名称</option>

								<option value="4">4</option>
							</select>
						</div>
					</div>
					<div class="layui-form form-wd" id="app2">
						<!--外出申请提交模态窗-->
						<div class="modal fade" id="goout" tabindex="-1" role="dialog" aria-labelledby="goout">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h4 class="modal-title" id="goout">外出申请提交</h4>
									</div>
									<div class="modal-body">
										<form action="" method="post" class="form-horizontal">
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">出勤项目：</label>
												<div class="col-sm-6">
													<select class="selectpicker" title="请选择" onchange="selectOnchang(this)">
														<option>option1</option>
														<option>option2</option>
														<option>option3</option>
														<option>option4</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">申请事由：</label>
												<div class="col-sm-6">
													<textarea class="form-control" rows="3" placeholder="请输入申请事由"></textarea>
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">外出时间：</label>
													<div class="input-group date form_date col-md-4" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
														<input class="form-control" size="16" type="text" value="" readonly>
														<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
													</div>
													<span class="fl line">——</span>
													<div class="input-group date form_date col-md-4" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
														<input class="form-control" size="16" type="text" value="" readonly>
														<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
													</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">出勤人员：</label>
												<div class="col-sm-6">
													<select class="selectpicker" multiple data-live-search="true" data-max-options="3" title="请选择人员" >
													    <option value="1">张三</option>
													    <option value="2">李四</option>
													    <option value="3">王二</option>
													</select>
												</div>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary" @click="addUser">确定</button>
									</div>
								</div>
							</div>
						</div>
						<!--审核模态框-->
						<div class="modal fade" id="shenhe" tabindex="-1" role="dialog" aria-labelledby="daoru">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h4 class="modal-title" id="shenhe">审核</h4>
									</div>
									<div class="modal-body">
										<form action="" method="post" class="form-horizontal">
											<div class="form-group">
												  <label for="firstname" class="col-sm-3 control-label tz-txt ">审核结果：</label>
											       <label class="radio-inline">
												        <input type="radio" name="optionsRadiosinline" id="yes" value="option1" title="通过" checked>
												    </label>
												    <label class="radio-inline">
												        <input type="radio" name="optionsRadiosinline" id="no"  value="option2" title="不通过">
												    </label>
											</div>
											<div class="form-group">
												  <label for="firstname" class="col-sm-3 control-label tz-txt ">备注：</label>
										        
													<div class="col-sm-6">
														<textarea id="textArea" class="form-control" rows="3" placeholder="请输入申请事由"></textarea>
														<!-- <span class="wordwrap"><var class="word" id="textNum">0</var>/100</span>-->
													</div>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#shenhe2" data-dismiss="modal">确定</button>
									</div>
								</div>
							</div>
						</div>
						<!--审核点击确定模态框-->
						<div class="modal fade" id="shenhe2" tabindex="-1" role="dialog" aria-labelledby="shenhe2">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h4 class="modal-title" id="shenhe">提示</h4>
									</div>
									<div class="modal-body" style="padding:5px;border: none;">
										<form action="" method="post" class="form-horizontal">
											<div class="form-group">
												 <label class="glyphicon glyphicon-question-sign alert wh"></label>
											       <p class="alert">提交后不可修改，你确定提交审核结果吗？</p>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
									</div>
								</div>
							</div>
						</div>
						<!--查看模态窗-->
						<div class="modal fade" id="look" tabindex="-1" role="dialog" aria-labelledby="goout">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h4 class="modal-title" id="look">查看</h4>
									</div>
									<div class="modal-body">
										<form action="" method="post" class="form-horizontal">
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">姓名：</label>
												<div class="col-sm-6 col-he">
													<span>战三</span>
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">所属部门：</label>
												<div class="col-sm-6 col-he">
													开发部
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">打卡地点：</label>
												<div class="col-sm-6 col-he">
													安徽合肥
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">打卡时间：</label>
												<div class="col-sm-6 col-he">
													2018.10.10
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">打卡附件：</label>
												<div class="col-sm-6 col-he">
													大蜀山
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">出勤项目：</label>
												<div class="col-sm-6 col-he">
													大蜀山
												</div>
											</div>
											<div class="form-group">
												<label for="name" class="control-label col-sm-3 ">状态：</label>
												<div class="col-sm-6 col-he">
													通过
												</div>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary" @click="addUser">确定</button>
									</div>
								</div>
							</div>
						</div>
							
						<!--列表-->
						<table class="table table-bordered table-hover">
							<thead>
								<tr style="background: #ccc;">
									<th>id</th>
									<th>姓名</th>
									<th>所属部门</th>
									<th>打卡地点</th>
									<th>打卡时间</th>
									<th>打卡附件</th>
									<th>出勤项目</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr  class="text-center" >
									<td>1</td>
									<td>出勤项目</td>
									<td>申请事由</td>
									<td>合肥</td>
									<td>2018.10.10 </td>
									<td>打卡附件</td>
									<td>出勤项目</td>
									<td>状态</td>
									<td>
										<button class="btn-primary btn-sm"  data-target="#shenhe" data-whatever="@mdo" data-toggle="modal">审核</button>
										<button class="btn-primary btn-sm"  data-target="#look" data-whatever="@mdo" data-toggle="modal">查看</button>
									</td>
									
								</tr>
							</tbody>
							
							
						</table>
						
						<div class="foot-div">
							<div class="checkbox fl">
							    <label>
							      	<select class="selectpicker form-control alls" title="批量操作" >
										<option value="项目名称">顺序</option>
										<option value="项目商家">降序</option>
									</select>
									
							    </label>
							  </div>
							  <!--分页-->
								<script type="text/x-template" id="page">
									<ul class="pagination page-ul fr">
										<li>
											<a class="tonum">共110条</a>
										</li>
										<li>
											<a href="#">首页</a>
										</li>
										<li v-show="current != 1" @click="current-- && goto(current)">
											<a href="#">上一页</a>
										</li>
										<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
											<a href="#">{{index}}</a>
										</li>
										<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
											<a href="#">下一页</a>
										</li>
										<li>
											<a href="#">尾页</a>
										</li>
									</ul>
								</script>
								<div id="app">
									<page></page>
								</div>
						</div>
						
					</div>

				</div>
			</div>
		</div>
			<!-- 移动导航 -->
			<div class="site-tree-mobile layui-hide" id="shu-btn"><i class="layui-icon"><img src="img/ri-line.png"/></i></div>
			<div class="site-mobile-shade"></div>
		<script src="js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-datetimepicker.fr.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript" src="js/leftNav.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript">
	  $(function(){ 
	  	function selectOnchang(obj){
				var value = obj.options[obj.selectedIndex].value;
				console.log(value);
			}
			//审核限制
			$('#textArea').on("keyup",function(){
			$('#textNum').text($('#textArea').val().length);
				if($('#textArea').val().length > 100){
			$('#textNum').text(100);
			$('#textArea').val($('#textArea').val().substring(0,100))
				}
			})
			$('#textNum').text($('#textArea').val().length);
			//日期
			$('.form_date').datetimepicker({
				format: 'yyyy-mm-dd',
				language: 'zh-CN',
				weekStart: 1,
				todayBtn: 1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0
			});
			});
			
			//分页
			Vue.component("page", {
				template: "#page",
				data: function() {
					return {
						current: 1,
						showItem: 5,
						allpage: 13
					}
				},
				computed: {
					pages: function() {
						var pag = [];
						if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
							//总页数和要显示的条数那个大就显示多少条
							var i = Math.min(this.showItem, this.allpage);
							while(i) {
								pag.unshift(i--);
							}
						} else { //当前页数大于显示页数了
							var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
								i = this.showItem;
							if(middle > (this.allpage - this.showItem)) {
								middle = (this.allpage - this.showItem) + 1
							}
							while(i--) {
								pag.push(middle++);
							}
						}
						return pag
					}
				},
				methods: {
					goto: function(index) {
						if(index == this.current) return;
						this.current = index;
						//这里可以发送ajax请求
					}
				}
			})
			//ajax
						
			new Vue({
				el: '#app2',
				created: function() {
					data={
					data:''
					
				};
					var url = "http://192.168.31.245:8080/invest-web/findAllProject";
					this.$http.post(url,data).then(function(data) {
						if(data.body.code == 1) {
							var json = data.body.data;
							console.log(json)
							console.log(data.body.total)
							this.data = json;
						} else {
							console.log(data.body.msg)
						}
					}, function(response) {
						console.log(response.data);
					})
	
				}
			});

			
		</script>
	</body>

</html>